<template>
  <view>
    <base-container>
      <template #head>
        <view class="detail-header">
          <view class="detail-title">{{ form.course }}</view>
          <view class="detail-desc">{{ form.createTime }}</view>
        </view>
      </template>
      <view style="padding: 20rpx">
        <view class="miancard">
          <view v-html="form.content"/>
        </view>
        <view class="btn-group" >
          <view :disabled="form.learned == 'Y'" class="main-btn" type="primary" @click.stop="complete">
            {{ form.learned == 'Y' ? '已学习' : '完成学习' }}
          </view>
        </view>
      </view>
    </base-container>
  </view>
</template>

<script>
import {LearnApi as Api} from "@/comms/api/learnApi";
import {Msg, toBack, toPath} from "@/utils/BaseUtils";

export default {
  data() {
    return {
      params: {},
      form: {
        learned: "N"
      }
    };
  },
  onLoad(params) {
    this.params = params;
    uni.setNavigationBarTitle({title: "课程详情"});
  },
  mounted() {
    this.loadDate(this.params)
  },
  methods: {
    toPath,
    async loadDate({id}) {
      Msg.loading(async close => {
        if (id) {
          await Api.detail({id}).then(({data}) => this.form = {...data})
        }
        close?.();
      })
    },
    async complete() {
      Msg.confirm("确认已查看全部内容?")
          .then(() => {
            Api.complete({id: this.form.id}).then(res => {
              toBack?.()
            })
          })
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-header {
  padding: 0 20rpx;

  .detail-title {
    padding-top: 10pt;
    font-weight: bold;
    font-size: 20pt;
    color: #333333;
  }

  .detail-desc {
    margin-top: 3pt;
    font-size: 12pt;
    color: #999999;
  }
}
.miancard{
	box-sizing: border-box;
	min-height: calc(100vh - 340rpx)
}
.main-btn{
	width: 100%;
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	background: #1763fc;
	border-radius: 10rpx;
}
.btn-group{
	
	margin:  40rpx 0 0;
	padding: 0;
}
</style>
